<script setup>
	import dataConnectorApi from '@/views/plugin/dashboard/api/dataConnectorApi'
	import { message, Modal } from 'ant-design-vue'
	import { isEmpty } from 'lodash-es'
	import { nextTick } from 'vue'
	import { Empty } from 'ant-design-vue'
	import DataConnectorForm from '@/views/plugin/dashboard/view/data/components/dataConnector/DataConnectorForm.vue'
	const cardLoading = ref(true)
	const emits = defineEmits(['treeSelect'])
	// 默认展开的节点
	const defaultExpandedKeys = ref([])
	const treeData = ref([])
	// 替换treeNode 中 title,key,children
	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }

	const dataConnectorFormRef = ref(null)
	// 抽屉标题
	// 当前选中的节点
	const selectedNode = ref(null)

	// 显示添加抽屉
	const showDrawer = () => {
		selectedNode.value = null
		dataConnectorFormRef.value.open()
	}

	// 显示修改/新增抽屉
	const showEditDrawer = (event, data) => {
		// 阻止事件冒泡
		if (event) {
			event.stopPropagation()
		}
		if (selectedNode.value && selectedNode.value.id !== '0') {
			dataConnectorFormRef.value.open(data)
		} else {
			selectedNode.value = null
			dataConnectorFormRef.value.open()
		}
	}

	// 处理删除
	const handleDelete = (data) => {
		if (data) {
			dataConnectorApi.delete([{ id: data.id }]).then(() => {
				message.success('删除成功')
				treeData.value = []
				loadTreeData()
			})
		}
	}

	// 点击树查询
	const treeSelect = (selectedKeys) => {
		emits('treeSelect', selectedKeys)
	}
	// 加载左侧的树
	const loadTreeData = () => {
		dataConnectorApi
			.list()
			.then((res) => {
				cardLoading.value = false
				if (res !== null) {
					// 清空现有树数据
					treeData.value = []
					nextTick(() => {
						// 构建一级树
						treeData.value.push({
							id: '0',
							name: '数据连接器',
							parentId: '0',
							children: res
						})
						if (isEmpty(defaultExpandedKeys.value)) {
							// 默认展开2级
							treeData.value.forEach((item) => {
								// 因为0的顶级
								if (item.parentId === '0') {
									defaultExpandedKeys.value.push(item.id)
									// 取到下级ID
									if (item.children) {
										item.children.forEach((items) => {
											defaultExpandedKeys.value.push(items.id)
										})
									}
								}
							})
						}
					})
				}
			})
			.finally(() => {
				cardLoading.value = false
			})
	}
	onMounted(() => {
		loadTreeData()
	})
</script>

<template>
	<a-card :bordered="false" :loading="cardLoading">
		<a-tree
			v-if="treeData.length > 0"
			v-model:expandedKeys="defaultExpandedKeys"
			:tree-data="treeData"
			show-icon
			:field-names="treeFieldNames"
			@select="treeSelect"
		>
			<template #title="{ dataRef }">
				<div class="w-full" @mouseenter="selectedNode = dataRef" @mouseleave="selectedNode = null">
					<div class="flex items-center justify-between" v-if="dataRef.id === '0'">
						<div class="flex items-center">
							<FolderTwoTone v-if="dataRef.parentId === '0'" />
							<FileTwoTone v-if="dataRef.parentId !== '0'" />
							<div class="ml-2 truncate">{{ dataRef.name }}</div>
						</div>
						<div v-if="selectedNode && selectedNode.id === dataRef.id" class="flex items-center gap-2 justify-end ml-4">
							<div
								class="cursor-pointer text-blue-500 hover:text-blue-600 flex items-center text-sm"
								@click="(e) => showEditDrawer(e, null)"
							>
								<PlusOutlined class="mr-1" />
								<span>新增</span>
							</div>
						</div>
					</div>

					<div v-else>
						<div class="flex items-center justify-between">
							<div class="flex items-center">
								<FolderTwoTone v-if="dataRef.parentId === '0'" />
								<FileTwoTone v-if="dataRef.parentId !== '0'" />
								<!-- <a-tooltip :title="dataRef.name"> -->
								<div class="ml-2 truncate">{{ dataRef.name }}</div>
								<!-- </a-tooltip> -->
							</div>

							<div
								v-if="selectedNode && selectedNode.id === dataRef.id"
								class="flex items-center gap-2 justify-end ml-2"
							>
								<div
									class="cursor-pointer text-blue-500 hover:text-blue-600 flex items-center text-sm"
									@click="(e) => showEditDrawer(e, dataRef)"
								>
									<EditOutlined class="mr-1" />
									<!-- <span>修改</span> -->
								</div>
								<div
									class="cursor-pointer text-red-500 hover:text-red-600 flex items-center text-sm"
									@click="
										(e1) => {
											Modal.confirm({
												title: '确认删除',
												content: '是否确认删除该数据连接器？删除后数据不可恢复！',
												okText: '确认',
												cancelText: '取消',
												onOk: () => handleDelete(dataRef)
											})
											// 阻止事件冒泡
											e1.stopPropagation()
										}
									"
								>
									<DeleteOutlined class="mr-1" />
									<!-- <span>删除</span> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</template>
		</a-tree>
		<a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
		<DataConnectorForm
			ref="dataConnectorFormRef"
			@success="
				() => {
					treeData.value = []
					loadTreeData()
				}
			"
		/>
	</a-card>
</template>

<style scoped lang="less">
	.context-menu-wrapper {
		width: 1px;
		height: 1px;
	}
	:deep(.ant-card-body) {
		padding: 16px;
	}
</style>
